Skip to main content
Version: 1.1.0

All cards settings - UX

The All cards theme settings are essential for controlling the overall look and feel of card elements across the theme. These settings ensure a consistent design for product, collection, and article cards throughout the shop, while allowing for overrides at the section or block level if needed.

Key settings include the ability to select a default image for cards, ensuring all cards have a visual element. Interactive features such as scaling cards on hover and applying image filters enhance user engagement. Additionally, the option to add a box shadow helps cards stand out, creating a visual hierarchy on the page.

Usage examples highlight how these settings can maintain brand consistency, enhance user interaction, and guide user attention to key products or collections. These features collectively contribute to a more engaging and cohesive shopping experience.

Overview​

The All cards theme settings are designed to control the overall look and feel of card elements across the theme. These settings are applied globally, ensuring a consistent and cohesive design for product, collection, and article cards throughout the shop. They can be overridden at the section or block level if needed.

Key components and functionality​

Default settings for cards​

These settings provide the foundational appearance and behavior for all card elements, ensuring uniformity unless specifically overridden.

  • Default image: This setting allows you to select a default image that will be used for cards when no specific image is provided. This ensures that all cards have a visual element, enhancing the overall aesthetic of the shop.

  • Scale cards on hover: When enabled, this setting allows cards to slightly enlarge when hovered over by a cursor. This interactive feature can draw attention to the cards and make the browsing experience more engaging. Default: true

  • Show box shadow: This setting adds a shadow effect around the cards, giving them a lifted appearance and helping them stand out against the background. Default: true

  • Show image filter on hover: This setting applies a filter effect to card images when hovered over, adding a dynamic visual effect that can enhance user interaction. Default: true

Usage examples​

  1. Consistent branding: By setting a default image, you can ensure that all cards have a consistent look, even if specific images are not available for certain products or collections. This helps maintain brand consistency across the shop.

  2. Enhanced user interaction: Enabling the "Scale cards on hover" and "Show image filter on hover" settings can make the browsing experience more interactive and engaging, encouraging users to explore products further.

  3. Visual hierarchy: Using the "Show box shadow" setting can help create a visual hierarchy on the page, making important cards stand out and guiding the user's attention to key products or collections.

These settings are designed to enhance the visual appeal and functionality of card elements, contributing to a more engaging and cohesive shopping experience.